<template>
    <div class="loading-contain">
        <div class="loading-wrap">
            <svg class="loading" width="80px" height="80px" viewBox="0 0 44 44">
                <circle class="path" fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20"></circle>
            </svg>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                // 
            }
        }
    }
</script>
<style lang="scss" scoped>
    .loading-contain{
        width:100%;
        height:100%;
        background-color:#000;
        opacity:0.7;
        position:absolute;
        top:0;
    }
    .loading-wrap {
        position: absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }
    .loading-text {
        color: #999;
        padding: 25px 0;
    }
    .loading {
        animation: rotator 1.4s linear infinite;
    }
    @keyframes rotator {
        0% {
            transform: scale(0.5) rotate(0deg);
        }
        100% {
            transform: scale(0.5) rotate(270deg);
        }
    }
    .loading .path {
        stroke: #009dd7;
        stroke-dasharray: 126;
        stroke-dashoffset: 0;
        transform-origin: center;
        animation: dash 1.4s ease-in-out infinite;
    }
    @keyframes dash {
        0% {
            stroke-dashoffset: 126;
        }
        50% {
            stroke-dashoffset: 63;
            transform: rotate(135deg);
        }
        100% {
            stroke-dashoffset: 126;
            transform: rotate(450deg);
        }
    }
</style>